<template>
    <Modal :mask-closable="false" v-model="repairVisible" :title="!id ? '添加维修记录' : '编辑维修记录'">
        <Form ref="repairForm" :model="formTop" label-position="top" :rules="validateRepair">
            <Row :gutter="16">
                <Col :span="12">
                <FormItem label="物料编号" prop="codeName">
                    <Select v-model="formTop.codeName" filterable clearable :remote-method="handleRemote"
                        :loading="searchLoading" @on-select="handleChangeWl">
                        <Option v-for="item in numberList" :value="item.codeName" :key="item.codeName">{{ item.codeName }}
                        </Option>
                    </Select>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="物料名称" prop="maName">
                    <Input v-model="formTop.maName" disabled />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="12">
                <FormItem label="规格型号" prop="maModel">
                    <Input v-model="formTop.maModel" disabled />
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="使用数量" prop="useNum">
                    <InputNumber v-model="formTop.useNum" style="width: 100%" />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="12">
                <FormItem :label="`${$t('maintenance.Unit')}:`" prop="maUnit">
                    <Input v-model="formTop.maUnit" />
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="物料单价" prop="maPrice">
                    <Input v-model="formTop.maPrice" :disabled="flag" />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="12">
                <FormItem label="维修人">
                    <Input v-model="formTop.maintainBy" />
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="维修单位">
                    <Input v-model="formTop.maintainUnit" />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="24">
                <FormItem label="处理方式及结果" prop="solutions">
                    <Input v-model="formTop.solutions" />
                </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "addRepairModal",
    data() {
        return {
            id: '',
            workorderNo: '',
            flag: false,
            isDisabled: false,
            repairVisible: false,
            loadingVisible: false,
            searchLoading: false,
            detailObj: {},
            formTop: {
                maPrice: 0,
                codeName: '',
                useNum: null,
                maintainBy: '',
                maintainUnit: '',
                solutions: ''
                // maName: '',
                // maModel: ''
            },
            validateRepair: {
                // codeName: [
                //     { required: true, message: '请选择物料编号', trigger: 'change' }
                // ],
                // useNum: [
                //     { required: true, type: 'number', message: '请输入使用数量', trigger: 'blur' }
                // ],
                // maName: [
                //     { required: true, message: '请输入名称', trigger: 'blur' }
                // ],
                // maModel: [
                //     { required: true, message: '请输入规格型号', trigger: 'blur' }
                // ],
                solutions: [
                    { required: true, message: '请输入处理方式及结果', trigger: 'blur' }
                ],
            },
            numberList: []
        }
    },
    watch: {
        // formTop(newValue) {
        //     this.formTop.codeName = newValue.maCode + '-' + newValue.maName
        //     console.log(newValue)
        // }
    },
    methods: {
        add(detailObj) {
            this.$refs.repairForm.resetFields()
            this.id = ''
            this.detailObj = { ...detailObj }
            this.repairVisible = true
            this.flag = detailObj.mainTyppe == 2 ? true : false
            // this.isDisabled = detailObj.mainTyppe == 1 ? false : true
            this.workorderNo = detailObj.workorderNo
            this.formTop.solutions = detailObj.solutions
            this.formTop.maintainBy = detailObj.mainTyppe == 1 ? this.detailObj.receBy : ''
            this.formTop.maintainUnit = detailObj.mainTyppe == 2 ? this.detailObj.manufacturer : detailObj.mainTyppe == 3 ? this.detailObj.maintainUnit : this.detailObj.department
            // this.formTop.manufacturer = this.detailObj.manufacturer
        },
        edit(record, detailObj) {
            
            this.$refs.repairForm.resetFields()
            this.id = record.id
            this.workorderNo = detailObj.workorderNo
            this.flag = detailObj.mainTyppe == 2 ? true : false
            // this.isDisabled = detailObj.mainTyppe == 1 ? false : true
            this.repairVisible = true
            this.getDetail(record.id)
        },
        getDetail(id) {
            this.axios({
                method: 'get',
                url: '/workorder/workorderRecord/queryById',
                params: {
                    id
                }
            }).then(res => {

                if (res.code === 200) {
                    this.$nextTick(() => {
                        // Object.assign(this.formTop, {...res.data, codeName: res.data.maCode + '-' + res.data.maName})
                        this.formTop = res.data
                        // this.formTop.maintainBy = this.detailObj.maintainBy
                        // this.formTop.maintainUnit = this.detailObj.maintainUnit
                        this.formTop.codeName = res.data.maCode + '-' + res.data.maName

                    })
                    this.handleRemote(res.data.maCode)
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                }
            }).finally(() => {
            })
        },
        handleRemote(query) {
            console.log(query, this.formTop.maCode)
            if (query !== '') {
                this.searchLoading = true;
                // if (query != this.formTop.maCode) {
                //     return false
                // }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorder/wlList',
                    params: {
                        maCode: query,
                        workorderNo: this.workorderNo
                    }
                }).then(res => {

                    if (res.code === 200) {
                        this.numberList = res.data.map(item => {
                            return {
                                ...item,
                                codeName: item.maCode + '-' + item.maName
                            }
                        })
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                    }
                }).finally(() => {
                    this.searchLoading = false
                })
            } else {
                this.numberList = [];
            }
        },
        handleChangeWl(val) {
            console.log(val)
            console.log(this.numberList)
            let flag = val.value.split('-')[0]
            let arr = this.numberList.length ? this.numberList.filter(item => item.maCode === flag) : []
            console.log(arr)
            this.formTop = {
                ...this.formTop,
                maCode: arr[0].maCode,
                maModel: arr[0].maModel,
                maName: arr[0].maName,
                // useNum: null,
                maPrice: arr[0].maPrice,
                maUnit: arr[0].maUnit,
                // maintainBy: this.formTop.maintainBy,
                // maintainUnit: this.formTop.maintainUnit,
            }
        },
        handleCancel() {
            this.$refs.repairForm.resetFields()
            this.repairVisible = false
            this.loadingVisible = false
        },
        handleOk() {
            let data = {
                ...this.formTop,
                maCode: this.formTop.codeName.split('-')[0],
                type: 2,
                workorderNo: this.workorderNo
            }
            this.$refs.repairForm.validate((valid) => {
                if (valid) {
                    this.loadingVisible = true
                    if (!this.id) {
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorderRecord/add',
                            data
                        }).then(res => {

                            if (res.code === 200) {
                                this.$Message.success('新增成功！')
                                this.$emit('handleTurnRepairAdd', res.data)
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                            }
                        }).finally(() => {
                            this.repairVisible = false
                            this.loadingVisible = false
                        })
                    } else {
                        this.axios({
                            method: 'put',
                            url: '/workorder/workorderRecord/edit',
                            data: {
                                ...data,
                                id: this.id
                            }
                        }).then(res => {

                            if (res.code === 200) {
                                this.$Message.success('编辑成功！')
                                this.$emit('handleTurnRepairEdit', res.data)
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                            }
                        }).finally(() => {
                            this.repairVisible = false
                            this.loadingVisible = false
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep.ivu-form-item-label {
    background: white !important;
    /*display: inline-block;*/
    /*width: 40%;*/
    /*height: 48px;*/
    /*line-height: 48px;*/
    /*background: #ffffff;*/
    /*text-align: right;*/
    border-right: 0 !important;
    /*padding-right: 10px;*/
}

::v-deep.ivu-form-item {
    margin-bottom: 24px !important;
    border-right: 0 !important;
}
</style>
